<template>
  <div class="home">
    <!-- 顶部状态栏 -->
    <el-header class="topbar">
      <div class="user-info">
        <span>{{ username }}</span>
        <el-button type="text" @click="handleLogout" class="logout-button">退出</el-button>
      </div>
    </el-header>

    <!-- 搜索框 -->
    <div class="search-container">
      <input v-model="searchQuery" placeholder="搜索书籍..." class="search-input" />
      <button @click="performSearch" class="search-button">搜索</button>
    </div>

    <!-- 主内容 -->
    <div class="main-content">
      <!-- 借阅记录展示 -->
      <div class="borrow-records-container">
        <div class="card">
          <div class="card-header">
            <h3>借阅记录</h3>
          </div>
          <div class="table-container">
            <table class="records-table">
              <thead>
              <tr>
                <th>用户信息</th>
                <th>书籍</th>
                <th>借阅日期</th>
                <th>归还日期</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="record in borrowRecords" :key="record.user">
                <td>{{ record.username }}</td>
                <td>{{ record.bookName }}</td>
                <td>{{ record.borrowDate }}</td>
                <td>{{ record.returnDate }}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- 搜索结果展示 -->
      <div v-if="dialogVisible" class="dialog-overlay">
        <div class="dialog">
          <div class="dialog-header">
            <h3>搜索结果</h3>
            <button @click="dialogVisible = false" class="close-button">×</button>
          </div>
          <div class="dialog-body">
            <div v-if="books.length === 0">没有找到图书信息。</div>
            <div v-else>
              <div class="books-container">
                <div v-for="book in books.slice(0, 3)" :key="book.id" class="book-card">
                  <h3>{{ book.bookName }}</h3>
                  <p><strong>作者:</strong> {{ book.author }}</p>
                  <p><strong>出版社:</strong> {{ book.publishingHouse }}</p>
                  <p><strong>出版日期:</strong> {{ formatDate(book.publishDate) }}</p>
                  <p><strong>页数:</strong> {{ book.pages }}</p>
                  <p><strong>ISBN:</strong> {{ book.ISBN }}</p>
                  <p><strong>价格:</strong> {{ book.price }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 用户信息展示弹出框 -->
      <div v-if="userInfoDialogVisible" class="dialog-overlay">
        <div class="dialog">
          <div class="dialog-header">
            <h3>用户信息</h3>
            <button @click="userInfoDialogVisible = false" class="close-button">×</button>
          </div>
          <div class="dialog-body">
            <div v-if="!userInfo">加载中...</div>
            <div v-else>
              <p><strong>用户名:</strong> {{ userInfo.username }}</p>
              <p><strong>邮箱:</strong> {{ userInfo.email }}</p>
              <p><strong>注册日期:</strong> {{ formatDate(userInfo.registrationDate) }}</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      books: [],
      searchQuery: '',
      dialogVisible: false,
      borrowRecords: [],
      username: '',
      userInfoDialogVisible: false,
      userInfo: null
    };
  },
  methods: {
    async fetchBorrowRecords() {
      try {
        const response = await axios.get('http://localhost:8080/books', {
          params: {
            action: 'recentRecords'
          }
        });
        this.borrowRecords = response.data;
      } catch (error) {
        console.error('Error fetching borrow records:', error);
      }
    },
    async performSearch() {
      try {
        const response = await axios.get('http://localhost:8080/books', {
          params: {
            action: 'search',
            bookName: this.searchQuery
          }
        });
        this.books = response.data;
        this.dialogVisible = true;
      } catch (error) {
        console.error('Error fetching search results:', error);
        this.books = [];
      }
    },
    formatDate(date) {
      if (!date) return '无日期';
      const d = new Date(date);
      if (isNaN(d)) return '无效日期';
      return d.toLocaleDateString();
    },
    handleLogout() {
      // 清除登录状态，跳转到登录页面
      localStorage.removeItem('username');
      window.location.href = '/login';
    },
    checkLogin() {
      // 从 localStorage 中获取当前登录的用户名
      const username = localStorage.getItem('username');
      if (username) {
        this.username = username;
      } else {
        // 未登录，跳转到登录页面
        window.location.href = '/login';
      }
    }
  },
  mounted() {
    this.fetchBorrowRecords();
    this.checkLogin(); // 检查登录状态
  }
};
</script>

<style scoped>
.home {
  text-align: center;
}

/* 顶部状态栏 */
.topbar {
  display: flex;
  justify-content: flex-start; /* 左对齐用户信息 */
  align-items: center;
  background-color: #ffffff; /* 更改状态栏颜色以适应导航栏 */
  color: #100e0e;
  position: fixed;
  top: 0;
  left: 300px; /* 适应左侧导航栏的宽度 */
  right: 0;
  height: 60px; /* 确保高度适应 */
  z-index: 1000;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-info span {
  margin-left: 10px;
}

.logout-button {
  color: #ff0000; /* 更改退出按钮的颜色 */
}

/* 调整搜索框和内容的位置 */
.search-container {
  display: flex;
  justify-content: center;
  margin-top: 70px; /* 增加顶部间距，避免被状态栏遮挡 */
}

.search-input {
  width: 600px; /* 增加搜索框宽度 */
  padding: 10px; /* 调整内边距 */
  border-radius: 4px;
  border: 1px solid #ccc;
}

.search-button {
  padding: 10px 20px; /* 调整按钮大小 */
  margin-left: 10px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
}

.main-content {
  display: flex;
  justify-content: center;
  margin: 40px 20px; /* 增加顶部和侧边距 */
}

.borrow-records-container {
  flex: 1;
  border: 1px solid #ebeef5; /* 添加边框 */
  border-radius: 8px; /* 圆角 */
  padding: 20px; /* 内边距 */
  background-color: #fff; /* 背景色 */
}

.table-container {
  max-height: 300px; /* 固定高度 */
  overflow-y: auto; /* 垂直滚动条 */
}

.records-table {
  width: 100%;
  border-collapse: collapse;
}

.records-table th,
.records-table td {
  border: 1px solid #ebeef5;
  padding: 10px;
  text-align: center;
}

.records-table th {
  background-color: #f5f5f5;
}

.book-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  margin: 16px;
  text-align: left;
  background-color: #f9f9f9;
}

.book-card h3 {
  margin: 0 0 8px;
}

.book-card p {
  margin: 4px 0;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 600px;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

.dialog-body {
  margin-top: 20px;
}

.books-container {
  max-height: 600px;
  overflow-y: auto;
}
</style>
